<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    text: { type: String, default: "暂无数据" },
    translateY: { type: String, default: "-40%" },
  },
});
</script>

<template>
  <view class="list-empty">
    <view
      class="list-empty-wrapper"
      :style="{ transform: `translateY(${translateY})` }"
    >
      <template v-if="$slots.default">
        <slot />
      </template>
      <image class="list-empty-img" v-else src="/static/list-empty.png" />
      <view class="list-empty-text">{{ text }}</view>
    </view>
  </view>
</template>

<style lang="scss">
.list-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .list-empty-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .list-empty-img {
    width: 560rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
  }

  .list-empty-text {
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
    text-align: center;
  }
}
</style>